import React from 'react';
import { Col, Row, Select } from 'antd';

class AnswerSlot extends React.Component{
  render() {
    const { slotDetailArr,index,selectSlot,answer } = this.props;
    return (
      <div>
        {
          slotDetailArr.map((slotDetailItem, slotIndex) => {
            return(
              <Row key={slotIndex} style={{marginBottom:10}}>
                <Col span={5}>{slotDetailItem.name}</Col>
                {
                  slotDetailItem.isEnum ?
                    <Col span={19}>
                      {answer.slotValues.length > 0 ?
                        <Select
                          style={{width:'100%'}}
                          mode="multiple"
                          placeholder="请选择词槽"
                          onChange={(value) => selectSlot(value,index,slotIndex,slotDetailItem.id,slotDetailItem.name,slotDetailItem.keyName)}
                          defaultValue={slotDetailItem.values}
                        >
                          {
                            slotDetailItem.items.map((val,index) => {
                              return <Select.Option key={val.word} value={val.word}>{val.word}</Select.Option>
                            })
                          }
                        </Select>
                        :
                        <Select
                          style={{width:'100%'}}
                          mode="multiple"
                          placeholder="请选择词槽"
                          onChange={(value) => selectSlot(value,index,slotIndex,slotDetailItem.id,slotDetailItem.name,slotDetailItem.keyName)}
                        >
                          {
                            slotDetailItem.items.map((val,index) => {
                              return <Select.Option key={val.word} value={val.word}>{val.word}</Select.Option>
                            })
                          }
                        </Select>
                      }

                    </Col>
                    :
                    <Col span={19}>词槽值不可枚举，不支持设置条件</Col>
                }
              </Row>
            )
          })
        }
      </div>
    )
  }
}

export default AnswerSlot;
